<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>综合练习</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }

    hr {
      margin: 15px 0;
    }

    li {
      padding: 10px 0;
    }

    .container {
      width: 400px;
      margin: 50px auto;
    }

    .index {
      margin-right: 10px;
    }

    .title {
      margin-right: 10px;
    }

    .hot {
      background: #f04142;
      font-size: 12px;
      color: #fff;
      padding: 2px 3px;
      border-radius: 3px;
    }

    .new {
      background: #ff9a03;
      font-size: 12px;
      color: #fff;
      padding: 2px 3px;
      border-radius: 3px;
    }

    ul li:first-child .index {
      color: #a82e2e;
    }

    ul li:nth-child(2) .index {
      color: #f25758;
    }

    ul li:nth-child(3) .index {
      color: #ff9a03;
    }

    ul li .index {
      /* color: #999999; */
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>

  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>

  <script type="text/babel">
    // https://www.toutiao.com/
    let data = [
      {
        id: 1,
        title: "河北通勤车坠河瞬间曝光",
        time: "2022-06-27",
        is_hot: true, //is_hot 是否是热门
        is_new: false,
      },
      {
        id: 2,
        title: "国足公布对阵沙特23人大名单",
        time: "2023-06-22",
        is_hot: true,
        is_new: false,
      },
      {
        id: 3,
        title: "“争控”成中印边境谈判关键词",
        time: "2023-05-22",
        is_hot: true,
        is_new: false,
      },
      {
        id: 4,
        title: "五粮液独董郎定常因突发疾病去世",
        time: "2024-04-22",
        is_hot: false,
        is_new: false,
      },
      {
        id: 5,
        title: "王立科被逮捕：曾想停播人民的名义",
        time: "2025-03-22",
        is_hot: false,
        is_new: true,
      },
      {
        id: 6,
        title: "台风“圆规”路径",
        is_hot: true,
        is_new: false,
        time: "2022-07-22",
      },
      {
        id: 7,
        title: "保姆报复前雇主偷走其最爱煎锅",
        is_hot: true,
        is_new: false,
        time: "2022-08-22",
      },
      {
        id: 8,
        title: "中国南海军事演习引发海外关注",
        is_hot: false,
        is_new: false,
        time: "2022-09-06",
      },
      {
        id: 9,
        title: "河北坠河班车已致14人遇难",
        is_hot: true,
        is_new: false,
        time: "2022-10-25",
      },
    ];

    //声明一个函数
    let fn = (time) => {
      return () => {
        alert(time);
      }
    }
    //列表渲染
    let vdom = <div className="container">
      <h2>热点新闻</h2>
      <hr />
      <ul>
        {
          data.map((item, index) => {
            return <li key={index} onClick={fn(item.time)}>
              <span className={`index index-${index}`}>{index + 1}</span>
              <span className="title">{item.title}</span>
              {item.is_hot && <span className="hot">热</span>}
              {item.is_new && <span className="new">新</span>}
            </li>
          })
        }
      </ul>
    </div>;

    //渲染
    ReactDOM.render(vdom, document.querySelector('#root'));
  </script>
</body>

</html>